<template>
  <a-card :bordered="false">
    <template #title>
      <a-space size="small">
        <LeftCircleTwoTone style="font-size: 20px" @click="$emit('showJobTable')"></LeftCircleTwoTone>
        {{ props.name + '的分片详情' }}
      </a-space>
    </template>
    <template #extra>
      <a-space size="small">
        <a-button type="primary" @click="$emit('showJobTable')">返回</a-button>
      </a-space>
    </template>
    <a-spin size="large" :spinning="spinning">
      <a-table
        class="ant-table-striped"
        :data-source="dataSource"
        :columns="columns"
        :row-key="recode => recode.item"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'statusDisplay'">
            <a-tag :color="jobShardingStatusTagColor(record.status)">
              {{ jobShardingStatusTagDisplay(record.status) }}
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'failover'">
            {{ record.failover }}
          </template>
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script setup lang="ts">
import { LeftCircleTwoTone } from '@ant-design/icons-vue';
import * as jobApi from '@/api/job/job';

const props = defineProps<{
  name: string;
}>();

defineEmits<{
  (e: 'showJobTable'): void;
}>();

const columns = [
  {
    title: '分片id',
    dataIndex: 'item',
  },
  {
    title: '服务器IP',
    dataIndex: 'serverIp',
  },
  {
    title: '进程ID',
    dataIndex: 'instanceId',
  },
  {
    title: '状态',
    key: 'statusDisplay',
  },
  {
    title: '支持自动失效转移',
    dataIndex: 'failover',
  },
];

let dataSource = ref([]);

onBeforeMount(() => {
  jobShardingList();
});

//加载中
let spinning = ref(false);

//获取作业列表
function jobShardingList() {
  if (!props.name) {
    return;
  }
  spinning.value = true;
  jobApi.jobShardingList({ jobName: props.name }).then(jsonResult => {
    spinning.value = false;
    if (!jsonResult) {
      return;
    }
    dataSource.value = jsonResult.result;
  });
}

//状态
function jobShardingStatusTagColor(jobShardingStatus: string) {
  let jobShardingStatusTag = 'success';
  if (jobShardingStatus === 'PENDING') {
    jobShardingStatusTag = 'success';
  } else if (jobShardingStatus === 'RUNNING') {
    jobShardingStatusTag = 'warning';
  } else if (jobShardingStatus === 'DISABLED') {
    jobShardingStatusTag = 'error';
  } else if (jobShardingStatus === 'SHARDING_FLAG') {
    jobShardingStatusTag = 'processing';
  }
  return jobShardingStatusTag;
}

//状态
function jobShardingStatusTagDisplay(jobShardingStatus: string) {
  let jobShardingStatusDisplay = '未知';
  if (jobShardingStatus === 'PENDING') {
    jobShardingStatusDisplay = '等待运行';
  } else if (jobShardingStatus === 'RUNNING') {
    jobShardingStatusDisplay = '运行中';
  } else if (jobShardingStatus === 'DISABLED') {
    jobShardingStatusDisplay = '已失效';
  } else if (jobShardingStatus === 'SHARDING_FLAG') {
    jobShardingStatusDisplay = '分片待调整';
  }
  return jobShardingStatusDisplay;
}
</script>

<style lang="less" scoped>
.paddingTop {
  margin-top: 30px;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
